<!-- 
bootstrap之响应式布局
    - 列偏移
    - .col-md-offset-列数，向右偏移几个列宽的空间
    - 底层是给当前元素添加margin-left实现的

    - 列排序
    - .col-md-push-列数，向右推
    - .col-md-pull-列数，向左拉
    - 改变列的排放顺序
 -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
        <title>列偏移</title>
        <style>
            .row {
                border: 1px solid red;
            }
            .one,
            .two {
                height: 100px;
                background-color: cyan;
            }
            .two {
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <!-- ---------------------列偏移 -->
        <div class="container">
            <!-- 左右对齐：12-总列数=偏移列数 -->
            <!-- 12-(4+2)=6 -->
            <div class="row">
                <div class="one col-md-4"></div>
                <div class="two col-md-2 col-md-offset-6"></div>
            </div>
            <!-- 居中对齐：(12-总列数)/2=偏移列数，注意列数（包括偏移列数）不能是小数 -->
            <!-- (12-6)/2=3 -->
            <div class="row">
                <div class="one col-md-6 col-md-offset-3"></div>
            </div>
        </div>
        <!-- ---------------------列排序 -->
        <div class="container">
            <div class="row">
                <!-- 刚好调换位置 -->
                <!-- 往右推10个列宽 -->
                <div class="one col-md-2 col-md-push-10">原来的左侧</div>
                <!-- 往左拉2个列宽 -->
                <div class="two col-md-10 col-md-pull-2">原来的右侧</div>
            </div>
        </div>
    </body>
</html>
